<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="实名认证"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">

			<view class="flex justify-center m-t16">
				<view class="relative">
					<view class="" @click="handleImageTools">
						<UploadImage v-model="form.selfie" @click.stop ref="upload" width="144rpx" height="144rpx"
							:deletable="false" deletePosition="bottomCenter" style="border-radius: 50%;"
							class="overflow-hidden shadow shadow-warp bg-white" :preview="false"
							@rawData="handleImageInput">
							<view class="upload-image" style="background-color: #fff;">
								<image src="/static/images/login/upload-avatar.png" class="width-72 height-72" mode="">
								</image>
							</view>
						</UploadImage>
					</view>
					<image src="/static/images/login/close.png" class="upload-delete" v-show="form.selfie" mode=""
						@click.stop="handleImageDelete"></image>
				</view>
			</view>
			<view class="margin-center text-center f-s12" style="margin-top: 26rpx;">
				<text>上传头像</text>
			</view>
			<view class="" style="margin-top: 74rpx;">
				<view class="" @click="$toast('不允许修改')">
					<FormInput title="真实姓名" placeholder="请输入真实姓名" v-model="form.realname" readonly></FormInput>
				</view>
				<view class="" @click="$toast('不允许修改')">
					<FormInput title="证件类型" placeholder="选择证件类型" value="居民身份证" readonly class="m-t11">
					</FormInput>
				</view>
				<view class="" @click="$toast('不允许修改')">
					<FormInput title="证件号码" placeholder="请输入身份证号码" class="m-t11" :maxlength="18" readonly
						v-model="form.cardsn">
					</FormInput>
				</view>
			</view>
			<view class="m-t16 text-gray f-s14 p-lr16" style="line-height: 44rpx;">
				<view class="">
					<text>认证说明</text>
				</view>
				<view class="">
					<text> 1、请上传清晰的正脸自拍照，请勿使用全身照/艺术照/过度美颜照；</text>
				</view>
				<view class="">
					<text> 2、实名认证通过后，与账号唯一绑定，无法解除绑定；</text>
				</view>
				<view class="">
					<text> 3、此实名认证用于对搭搭头像认证，年龄真实性验证，头像真实以及必须大于18周岁才能通过，姓名及证件号码不会对外展示，我们会对你的信息进行严格的保密。</text>
				</view>
			</view>
			<view class="fixed-bottom p-lr16" @click="handleConfirm">
				<view class="self-btn full-width" hover-class="pressed">
					<text>重新提交</text>
				</view>
			</view>
			<u-action-sheet :actions="sheetList" :show="sheetShow" :closeOnClickOverlay="true"
				:closeOnClickAction="true" @select="handleSheetSelect" @close="sheetShow = false"></u-action-sheet>
			<Toast></Toast>
			<qf-image-cropper v-if="isCropper" :src="cropperSrc" :width="500" :height="500" gpu zIndex="99999"
				@crop="handleCrop"></qf-image-cropper>
			<Modal :show.sync="modalShow" title="提示" content="您是否确认重新提交审核？\n如果存在正在审核中数据将被覆盖"
				@confirm="handleModalConfirm">
			</Modal>
		</view>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	import UploadImage from '@/components/upload-image'
	import FormInput from '@/components/form-input'
	import {
		authStepsDetails,
		avatarUpdate
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			UploadImage,
			FormInput,
			QfImageCropper,
			Modal
		},
		props: {
			storageForm: {
				default: null
			}
		},
		onLoad() {
			this.getDetail()
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				assetsPath: getApp().globalData.config.assetsPath,
				sheetShow: false,
				sheetList: [{
					name: '预览图片',
					index: 1
				}, {
					name: '重新编辑',
					index: 2
				}],
				cropperSrc: '',
				isCropper: false,
				form: {
					selfie: null,
					realname: null,
					card_type: 1,
					cardsn: null
				}
			}
		},

		methods: {
			handleModalConfirm() {
				// if (!this.validateForm(this.form)) return
				// 校验头像
				if (!this.form.selfie) {
					this.$toast('请上传头像');
					return false;
				}
				// 搭搭认证（修改头像）
				this.$modal.loading("正在提交").then(() => {
					avatarUpdate({selfie:this.form.selfie}).then(res => {
						this.$modal.closeLoading()
						this.getDetail()
						this.$toast(res.msg)
					}).catch(() => this.$modal.closeLoading())
				})

			},
			handleSheetSelect(select) {
				let url = this.form.selfie.includes(this.assetsPath) ? this.form.selfie : this.assetsPath + this.form
					.selfie
				switch (select.index) {
					case 1:
						uni.previewImage({
							urls: [url],
							current: 0
						})
						break;
					case 2:
						this.handleImageInput(url)
						break;
					default:
						break;
				}
			},
			handleImageInput(val) {
				this.cropperSrc = val
				setTimeout(()=>{
					this.isCropper = true
				},200)
			},
			handleImageTools() {
				if (!this.form.selfie) return
				this.sheetShow = true
			},
			handleCrop(e) {
				this.handleImageDelete()
				this.$refs.upload.uploadFilePromise(e.tempFilePath)
				this.isCropper = false
			},
			handleImageDelete() {
				this.form.selfie = null
			},
			getDetail() {
				authStepsDetails({
					auth_type: 1
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.detailData = auth_detail
					for (let key in this.form) {
						this.form[key] = auth_detail[key]
					}

				})
			},
			handleConfirm() {
				this.modalShow = true
			},
			validateForm(form) {
				// 校验头像
				if (!form.selfie) {
					this.$toast('请上传头像');
					return false;
				}

				// 校验真实姓名
				if (!form.realname) {
					this.$toast('请输入真实姓名');
					return false;
				} else {
					const chineseRegex = /^[\u4e00-\u9fa5]+$/;
					if (!chineseRegex.test(form.realname)) {
						this.$toast('请输入真实姓名');
						return false;
					}
				}

				// 校验证件类型
				if (!form.card_type) {
					this.$toast('请选择证件类型');
					return false;
				}

				// 校验身份证号
				if (!form.cardsn) {
					this.$toast('请输入身份证号');
					return false;
				} else {
					const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
					if (!idCardRegex.test(form.cardsn)) {
						this.$toast('身份证号格式不正确');
						return false;
					}
				}

				// 所有校验通过
				return true;
			}

		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.container {
		.main {
			padding: 0 32rpx;
		}

		::v-deep .u-upload__wrap__preview {
			margin: 0;
		}

		.upload-delete {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 0;
			right: -20rpx;
		}
	}
</style>